<template>
  <div class="box_list">
    <!-- 路径面包屑区域 -->
    <el-breadcrumb class="mb15">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工作区域 -->
    <div class="box_content">
      <el-card>
        <!-- 查询添加按钮区域 -->
        <el-row :gutter="0">
          <el-col :span="24">
            <el-button type="primary" size="small" @click="addRolesForm">添加角色</el-button>
          </el-col>
        </el-row>
        <!-- 角色列表区域 -->
        <el-table :data="rolesData" border stripe class="mt15" >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row
                v-for="(itemOne,indexOne) in scope.row.children"
                :key="itemOne.id"
                :class="['border_bottom',indexOne==0?'border_top':'','algin_center']"
              >
                <!-- 一级权限渲染 -->
                <el-col :span="5">
                  <el-tag
                    type="primary"
                    closable
                    @close="removeRolesId(scope.row,itemOne.id)"
                  >{{itemOne.authName}}</el-tag>
                  <i class="el-icon-caret-right"></i>
                </el-col>
                <el-col :span="19">
                  <!-- 二级权限渲染 -->
                  <el-row
                    v-for="(itemTwo,indexTwo) in itemOne.children"
                    :key="itemTwo.id"
                    :class="[indexTwo==0?'':'border_top','algin_center']"
                  >
                    <el-col :span="7">
                      <el-tag
                        type="success"
                        closable
                        @close="removeRolesId(scope.row,itemTwo.id)"
                      >{{itemTwo.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <!-- 三级权限渲染 -->
                    <el-col :span="17" class="bac_style">
                      <el-tag
                        v-for="itemThree in itemTwo.children"
                        :key="itemThree.id"
                        type="warning"
                        closable
                        @close="removeRolesId(scope.row,itemThree.id)"
                      >{{itemThree.authName}}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column label="角色名称" prop="roleName"></el-table-column>
          <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editRolesForm(scope.row.id)"
              >编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delRoles(scope.row.id)">删除</el-button>
              <el-button type="primary" icon="el-icon-setting" size="mini" @click="rids(scope.row)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <router-view @refreshData="refreshMethod"></router-view>
    <!-- **************分配权限************* -->
    <Rids ref="rids"></Rids>
  </div>
</template>

<script>
import Rids from './Rids'
export default {
  components:{Rids},
  data() {
    return {
      rolesData: [],
    };
  },
  created() {
    // 获取角色列表
    this.getRolesList();
  },
  methods: {
    // 获取角色列表请求
    getRolesList() {
      this.$axios
        .get("roles")
        .then((res) => {
          if(res.data.meta.status==200){
            this.rolesData = res.data.data;
          }else(
            this.$message.error("获取角色列表失败")
          )
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //删除角色指定权限 接受传过来两个参数 rolesId角色id ,rightId当前选中权限id
    removeRolesId(roles, rightId) {
      this.$msgBox
        .confirm("此操作将永久删除当前权限, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.$axios
            .delete(`roles/${roles.id}/rights/${rightId}`)
            .then((res) => {
              if(res.data.meta.status==200){
                this.$message.success("删除权限成功");
              //数据渲染到当前children节点中；防止页面刷新 不用 this.getRolesList();
              roles.children = res.data.data;
              }else{
                return this.$message.error("删除权限失败")
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加角色form
    addRolesForm() {
      this.$router.replace("/roles/addRoles");
    },
    //修改角色
    editRolesForm(id) {
      this.$router.replace({ path: "/roles/editRoles", query: { id } });
    },
     //删除当前角色
    delRoles(id){
     
      this.$msgBox
        .confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then((res) => {
          this.$axios
            .delete("roles/" + id)
            .then((res) => {
               console.log(id)
              if (res.data.meta.status == 200) {
                this.$message.success("删除当前角色成功");
                this.getRolesList();
              } else {
                this.$message.error("删除当前角色失败");
              }
            })
            .catch((error) => {
              this.$message.error("系统出错");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //监听子组件操作完成后的实现父组件刷新
    refreshMethod(){
       this.getRolesList()
    },
      //权限分配
    rids(role) {
      console.log(role)
      this.$refs.rids.showDialog();
    },
    
  },
};
</script>

<style scoped>
.el-tag {
  margin: 10px 10px 10px 0;
}
.border_top {
  border-top: 1px solid#ebeef5;
}
.border_bottom {
  border-bottom: 1px solid#ebeef5;
}
.bac_style {
  background: #fbfbfb;
  padding-left: 10px;
  margin: 5px 0;
}
.algin_center {
  display: flex;
  align-items: center;
}
</style>